<template>
  <div class="container">
    <div
      class="left"
      :style="{
        width: isCollapse ? '65px' : '200px',
        background: currentThemeColor,
      }"
    >
      <div class="logo">
        <div>{{ !isCollapse ? '学生管理系统' : 'Student' }}</div>
      </div>
      <el-menu
        default-active="2"
        active-text-color="#ffd04b"
        :background-color="currentThemeColor"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :collapse="isCollapse"
        router
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Star /></el-icon>
            <span>信息管理</span>
          </template>
          <el-menu-item index="/menu/role">角色管理</el-menu-item>
          <el-menu-item index="/menu/admin">信息整合与共享</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>成绩管理</span>
          </template>
          <el-menu-item index="/menu/home">成绩录入</el-menu-item>
          <el-menu-item index="1-2">成绩查询</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Notification /></el-icon>
            <span>资料管理</span>
          </template>
          <el-menu-item index="1-1">文档管理</el-menu-item>
          <el-menu-item index="1-2">照片管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>就业管理</span>
          </template>
          <el-menu-item index="1-1">就业信息记录管理</el-menu-item>
          <el-menu-item index="1-2">招聘信息发布管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="right">
      <div class="top" :style="{ background: currentThemeColor }">
        <div class="icon" @click="isCollapse = !isCollapse">
          <el-icon :size="35" v-show="isCollapse"><Fold /></el-icon>
          <el-icon :size="35" v-show="!isCollapse"><Expand /></el-icon>
        </div>
        <div class="menu">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            :background-color="currentThemeColor"
            text-color="#fff"
          >
            <el-menu-item index="1">
              <el-icon><HomeFilled /></el-icon>
              首页</el-menu-item
            >
            <el-menu-item index="2"
              ><el-icon><Star /></el-icon>邮件</el-menu-item
            >
            <el-menu-item index="3"
              ><el-icon><Service /></el-icon>消息</el-menu-item
            >

            <el-sub-menu index="2">
              <template #title>
                <el-icon><View /></el-icon>切换皮肤</template
              >
              <el-menu-item
                @click="changeTheme(index)"
                :index="'4-' + (index + 1)"
                v-for="(item, index) in getColorNames"
                :key="item"
                :value="index"
                >{{ item }}</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title
                ><el-icon><UserFilled /></el-icon>管理员</template
              >
              <el-menu-item index="2-1">个人中心</el-menu-item>
              <el-menu-item index="2-2">修改密码</el-menu-item>
              <el-menu-item index="2-3" @click="exit">退出系统</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>
      <div class="bottom">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
//导入组合式API
import { reactive, toRefs, computed } from 'vue'
//导入全局状态管理对象
import { useStore } from 'vuex'
//引入路由
import { useRouter } from 'vue-router'
//导入图标
import {
  Star,
  Setting,
  Notification,
  MessageBox,
  Expand,
  Fold,
  HomeFilled,
  View,
  Service,
  UserFilled,
} from '@element-plus/icons'

export default {
  name: 'MenuLayout',
  components: {
    Star,
    Setting,
    Notification,
    MessageBox,
    Expand,
    Fold,
    HomeFilled,
    View,
    Service,
    UserFilled,
  },
  setup() {
    //返回一个全局状态管理对象
    //返回一个路由器对象
    let $router = useRouter()

    let $store = useStore()
    //获取浏览器缓存中的颜色主题
    if (localStorage.getItem('color') && localStorage.getItem('colorName')) {
      let color = {
        color: localStorage.getItem('color'),
        name: localStorage.getItem('colorName'),
      }
      $store.dispatch('theme/updateCurrentThemeColor', color)
    }

    //退出系统方法
    let exit = () => {
      //清除所有的浏览器缓存
      sessionStorage.clear()
      localStorage.clear()
      //跳转到登录页
      $router.push('/login')
    }
    //定义数据
    let data = reactive({
      //左侧菜单是否折叠
      isCollapse: false,
    })
    //从全局状态里面获取颜色数组
    let getColorNames = computed(() => {
      return $store.getters['theme/getColorNames']
    })
    // console.log(getColorNames);
    //从全局状态里面获取当前主题色
    let currentThemeColor = computed(() => {
      return $store.state.theme.currentThemeColor.color
    })
    // console.log(currentThemeColor);
    //切换主题的方法
    let changeTheme = (index) => {
      //根据index,获取对应的颜色主题
      let color = $store.state.theme.colors[index]
      //将获取到的颜色主题，保存到浏览器的缓存中
      // localStorage.setItem('color', color.color)
      // localStorage.setItem('colorName', color.name)

      //然后将该颜色主题，赋值给当前颜色主题
      $store.dispatch('theme/updateCurrentThemeColor', color)
    }
    return {
      ...toRefs(data),
      getColorNames,
      currentThemeColor,
      changeTheme,
      exit,
    }
  },
}
</script>
<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  // background-color: #12a182;

  .left {
    // background-color: #545c64;
    transition: all 0.5s;
    .logo {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;

      div {
        color: rgb(255, 255, 255);
        font-size: 24px;
        font-weight: bold;

        border: 1px solid white;
        padding: 4px 15px;
        border-radius: 4px;
        //不收缩
        flex-shrink: 0;
      }
    }
    /* background: lightslategrey; */
  }
  .right {
    flex: 1;
    /* background: lightseagreen; */
    display: flex;
    flex-direction: column;
    .top {
      height: 60px;
      // background-color: #545c64;
      /* background: red; */
      display: flex;
      align-items: center;
      justify-content: space-between;
      // flex-direction: row-reverse;
      .icon {
        color: white;
        padding-left: 10px;
      }
      .menu {
        width: 1500px;
      }
      // div {
      //   width: 1500px;
      // }
    }
    .bottom {
      flex: 1;
      padding: 10px;
      /* background: gray; */
    }
  }
}
</style>
